<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1.图片与文字环绕</title>
		<style>
			p{
				bord   er: 1px solid red;
				fl oat:left;
				font-size: 16px; /* 页面文字默认大小:16px */
				line-height: 20px; /* 浮动p块元素 内容行内元素 */
				/* 文字不要加浮动  特点：块包行*/ 
			}
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1.图片与文字环绕</h1>
		<img src="img/img_1.png" alt="哪吒" width="200px" height="200px"/>
		<img src="img/img_2.png" alt="哪吒" width="200px" height="200px"/>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta perferendis vel fuga nesciunt inventore sapiente culpa harum, explicabo distinctio eaque, velit consequuntur esse et recusandae hic magnam ipsam a? Ea. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, voluptatibus consequuntur ex recusandae fugiat animi. Modi, at repudiandae, optio minus veniam illum quia exercitationem recusandae ad et ipsam blanditiis earum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil laudantium similique tempora, deserunt esse magnam ex soluta eveniet dolor est sed nobis ratione maxime repellat assumenda illum, repudiandae nam alias. </p>
	</body>
</html>